<template>
  <el-form-item
    :label="data.label || ''"
    :prop="data.dataName"
    :label-width="data.labelWidth"
    :style="{ width: data.width || '100%' }"
  >
    <el-select
      v-if="data.component == 'select'"
      v-model="form[data.dataName]"
      :multiple="data.multiple"
      :placeholder="`请选择${data.label}`"
      @change="(v) => data.change && data.change(v, form, data)"
    >
      <el-option
        v-for="item in option"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-input
      v-if="data.component == 'input'"
      v-model="form[data.dataName]"
      :placeholder="`请输入${data.label}`"
      :onkeyup="data.onkeyup || ''"
      :type="data.type"
      @input="(v) => data.change && data.change(v, form, data)"
    />
    <el-cascader
      v-if="data.component == 'cascader'"
      v-model="form[data.dataName]"
      :placeholder="`请输入${data.label}`"
      :options="option"
      @input="(v) => data.change && data.change(v, form, data)"
    />
    <el-radio-group
      v-if="data.component == 'radio'"
      v-model="form[data.dataName]"
      @change="(v) => data.change && data.change(v, form, data)"
    >
      <el-radio
        v-for="(dict, index) in dict.type[data.dict] || option"
        :key="dict.value + index"
        :border="data.border"
        :label="dict.value"
      >{{ dict.label }}</el-radio>
    </el-radio-group>
  </el-form-item>
</template>

<script>
import Vue from 'vue'
export default {
  dicts: [
    'database_case_sensitive',
    'data_status',
    'data_base_type',
    'database_auto_commit',
    'database_datatype',
    'database_datataststatus',
    'dabase_show',
    'instancename_show',
    'field_case',
    'objectname_quote',
    'synchronous_exceptionhandling',
    'synchronous_jobmode',
    'sys_job_status'
  ],
  props: {
    data: {
      type: Object,
      required: true
    },
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      option: []
    }
  },
  mounted() {
    const { component, defaultValue, dataName } = this.$props.data
    if (component === 'select' || component === 'cascader') {
      this.getOption()
    }
    if (!this.$props.form[dataName] && defaultValue) {
      Vue.set(this.$props.form, dataName, defaultValue)
    }
  },
  methods: {
    async getOption() {
      const {
        form
      } = this.$props

      const res = await this.$props.data.option(form.type || '', form)
      this.option = res
    }
  }
}
</script>
